<template>
	<view>
		<u-navbar back-text="返回" title="任务中心"></u-navbar>
		<view
			style="padding: 12rpx 18rpx 0rpx 18rpx; color: #ffffff; position: fixed; top: 42px; left: 0; width: 100%; z-index: 999;">
			可用积分：<text style="font-weight: 500; font-size: 42rpx;">{{user.score}}</text>
			<u-button type="success" size="mini" shape="circle"
				:custom-style="{backgroundColor:'rgb(56, 142, 60)',border:'none',float: 'right',marginTop:'10rpx'}" @click="onClickExchange">去兑换
			</u-button>
		</view>
		<view
			style="background-color: #4caf50; border-bottom-left-radius: 60rpx; border-bottom-right-radius: 60rpx; padding-bottom: 60rpx;">

			<canvas style="width: 100%; height: 200px;" canvas-id="firstCanvas" id="firstCanvas"
				@touchend="onClickCanvas"></canvas>
		</view>
		<view style="padding:0rpx 24rpx;">
			<view style="margin-top: -60rpx; padding: 24rpx; background-color: #ffffff; border-radius: 20rpx;">
				<view style="display: flex; align-items: center;">
					<view style="flex: 1;">已连续签到<text style="color:#FF5722;">{{SignIn.successions}}</text>天</view>
					<view>签到提醒</view>
					<view style="padding-top: 8rpx; padding-left: 5rpx;">
						<u-switch v-model="remind_checked" size="30" active-color="#388E3C"></u-switch>
					</view>
				</view>
				<view style="display: flex; margin-top: 20rpx;">
					<view v-for="(item,index) in SignIn.SignInDayList" :key="index"
						:class="item.is_signin?'signinitem_action':'signinitem'">
						<view class="score">+{{item.score}}</view>
						<view class="day">{{item.name}}</view>
					</view>
				</view>
			</view>

			<view style="margin-top: 30rpx; background-color: #ffffff; padding: 24rpx; border-radius: 20rpx;">
				<view style="display: flex;">
					<view style="flex: 1; color: #000000; font-weight: bold;">今日任务</view>
					<view>已完成{{completedNumber}}/2</view>
				</view>
				<view style="padding: 22rpx 0rpx;">
					<u-line-progress active-color="#4CAF50" :percent="Math.floor(completedNumber/2*100)"
						:striped-active="true" :striped="true"></u-line-progress>
				</view>
				<u-line color="#ececec" style="margin-top: 20rpx;" />
				<view style="display: flex; align-items: center; padding: 24rpx 0rpx;">
					<view>
						<view class="t-icon t-icon-yuangongdaka"
							style="width: 100rpx; height: 100rpx; vertical-align: -9px;"></view>
					</view>
					<view style="flex: 1; padding-left: 18rpx;">
						<view style="font-size: 32rpx; font-weight: 600; line-height: 40rpx;">每日签到</view>
						<view style="font-size: 24rpx; color: #bdbdbd;">每日签到可得海量积分</view>
					</view>
					<view>
						<u-button size="default" type="error" shape="circle"
							:custom-style="{backgroundImage:'linear-gradient(#cccccc, #eeeeee)'}" hover-class="none"
							v-if="SignIn.todaySignIn">已完成</u-button>
						<u-button size="default" type="error" shape="circle"
							:custom-style="{backgroundImage:'linear-gradient(#388E3C, #8BC34A)'}" hover-class="none" @click="onClickSignIn"
							v-else>去完成</u-button>
					</view>
				</view>
				<u-line color="#ececec" />
				<view style="display: flex; align-items: center; padding: 24rpx 0rpx;">
					<view>
						<view class="t-icon t-icon-yuangonggaiyao"
							style="width: 100rpx; height: 100rpx; vertical-align: -9px;"></view>
					</view>
					<view style="flex: 1; padding-left: 18rpx;">
						<view style="font-size: 32rpx; font-weight: 600; line-height: 40rpx;">每日登录</view>
						<view style="font-size: 24rpx; color: #bdbdbd;">每日登录可 + {{setting.today_login_score}}个积分</view>
					</view>
					<view>
						<u-button size="default" type="error" shape="circle"
							:custom-style="{backgroundImage:'linear-gradient(#cccccc, #eeeeee)'}" hover-class="none">已完成
						</u-button>
					</view>
				</view>
			</view>

			<view style="margin-top: 30rpx; background-color: #ffffff; padding: 24rpx; border-radius: 20rpx;">
				<view style="display: flex;">
					<view style="flex: 1; color: #000000; font-weight: bold;">其它任务</view>
				</view>
				<u-line color="#ececec" margin="20rpx 0rpx 0rpx 0rpx" />
				<view style="display: flex; align-items: center; padding: 24rpx 0rpx;">
					<view>
						<view class="t-icon t-icon-yuangongtongxun"
							style="width: 100rpx; height: 100rpx; vertical-align: -9px;"></view>
					</view>
					<view style="flex: 1; padding-left: 18rpx;">
						<view style="font-size: 32rpx; font-weight: 600; line-height: 40rpx;">完善信息</view>
						<view style="font-size: 24rpx; color: #bdbdbd;">完善个人信息可 + {{setting.fill_info}}个积分</view>
					</view>
					<view>
						<u-button size="default" type="error" shape="circle"
							:custom-style="{backgroundImage:'linear-gradient(#cccccc, #eeeeee)'}" hover-class="none" v-if="fillInfo">已完成
						</u-button>
						<u-button size="default" type="error" shape="circle"
							:custom-style="{backgroundImage:'linear-gradient(#388E3C, #8BC34A)'}" hover-class="none" @click="onClickInfo" v-else>去完成
						</u-button>
					</view>
				</view>
			</view>
		</view>



		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		Tween
	} from "@/js/tween.js";
	export default {
		data() {
			return {
				userinfo: null,
				token: '',
				screenW: 0,
				context: null,
				rlist: [],
				user: {score:0},
				SignIn: {successions:0},
				remind_checked: false,
				completedNumber: 0,
				todayLogin: 0,
				fillInfo: 0,
				setting: {today_login_score:0},
			}
		},
		onLoad() {
			var that = this;
			this.checkLogin();
			this.LoadData();
		},
		onReady: function(e) {
			var that = this;
			this.context = uni.createCanvasContext('firstCanvas');
			uni.getSystemInfo({
				success: function(res) {
					that.screenW = res.screenWidth;
					that.createAnimate();
				}
			})

		},
		methods: {
			async checkLogin() {
				this.userinfo = uni.getStorageSync('userinfo');
				this.token = this.userinfo.token;
				let res = await this.$api.myRequest({
					url: 'api/index/checklogin',
					header: {
						token: this.token
					}
				});
				console.log(res);
				if (res.data.code == 0) {
					await uni.showModal({
						title: '温馨提示',
						content: '你还没，请先登录',
						success(res) {
							if (res.confirm) {
								// 账户秘密登录
								let url = '/pages/login/login';
								uni.navigateTo({
									url: url
								});
							}
						}
					})
				}
			},
			LoadData(){
				var that = this;
				uni.request({
					url: this.$unishow + 'api/mission/index',
					method: 'GET',
					header: {
						token: this.token
					},
					data: {},
					success: res => {
						for (let i in res.data.DrawList) {
							let grid = that.GetBubbleGrid();
							that.rlist[i] = {
								x: grid.x, //坐标x
								y: grid.y, //坐标y
								r: 20, //原始半径
								sr: 20, //开始半径
								sx: 70, //开始坐标
								sy: 80, //开始坐标
								rr: 20, //当前半径
								c: '#ffffff', //圆的颜色
								a: 5, //半径变动值
								t: 0, //动画开始侦
								e: that.GetRandom(120, 150), //动画结束侦
								info: res.data.DrawList[i],
								action: {}
							};
						}
						that.user = res.data.user;
						that.SignIn = res.data.SignIn;
						that.completedNumber = res.data.completedNumber;
						that.todayLogin = res.data.todayLogin;
						that.fillInfo = res.data.fillInfo;
						that.setting = res.data.setting;
					},
					fail: () => {},
					complete: () => {}
				});
			},
			onClickSignIn() { //签到
				var that = this;
				console.log('fff');
				uni.request({
					url: this.$unishow + 'api/mission/dosignin',
					method: 'GET',
					header:{token:that.token},
					data: {},
					success: res => {
						that.$refs.uToast.show({
							title: res.data.msg,
							position: 'bottom',
						});
						if(res.data.code == 1){
							that.LoadData();
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			onClickCanvas(e) {
				console.log(e.changedTouches[0]);
				let jl = this.GetPosLen(this.screenW / 2, 100, e.changedTouches[0].x, e.changedTouches[0]
					.y);
				if (jl < 45) { //点击中心
					console.log('点击中心');
					for (let i in this.rlist) {
						this.rlist[i].action = {
							type: 'move',
							x: this.screenW / 2,
							y: 100,
							status: 0,
						};
						this.ReceiveScore(this.rlist[i].info);
					}
				}

				for (let i in this.rlist) { //循环判断是否点击了气泡
					jl = this.GetPosLen(this.rlist[i].x, this.rlist[i].y, e.changedTouches[0].x, e.changedTouches[0]
						.y);
					if (jl < this.rlist[i].rr) {
						console.log(i);
						this.rlist[i].action = {
							type: 'in',
							status: 0,
						};
						this.ReceiveScore(this.rlist[i].info);
						return;
					}
				}
			},
			ReceiveScore(info){
				var that = this;
				uni.request({
					url: this.$unishow + 'api/mission/receivescore',
					method: 'POST',
					header:{token:this.token},
					data: {id:info.id},
					success: res => {
						that.user.score = that.user.score + res.data.data.score;
					},
					fail: () => {},
					complete: () => {}
				});
			},
			onClickInfo(){
				uni.navigateTo({url:'/pages/user/info'});
			},
			onClickExchange(){
				window.location.href = this.$unishow + "client/pmall";
			},
			createAnimate() {
				var that = this;
				window.requestAnimationFrame(that.createAnimate);
				let centerX = that.screenW / 2;
				let centerY = 100;

				that.context.clearRect(0, 0, this.screenW, 200);
				that.context.beginPath();
				that.context.arc(centerX, centerY, 110, 0, 2 * Math.PI);
				that.context.setFillStyle('#ffffff');
				that.context.setGlobalAlpha(0.2)
				that.context.fill()

				that.context.beginPath()
				that.context.setGlobalAlpha(1)
				that.context.setStrokeStyle('#ffffff');
				that.context.arc(centerX, centerY, 48, 0, 2 * Math.PI);
				that.context.stroke()

				that.context.beginPath();
				that.context.arc(centerX, centerY, 45, 0, 2 * Math.PI);
				that.context.setFillStyle('#ffffff');
				that.context.fill()

				that.context.beginPath();
				that.context.setFontSize(20);
				that.context.setFillStyle('#4caf50');
				that.context.setTextAlign('center');
				that.context.setTextBaseline('middle');
				that.context.fillText('点击领取', centerX, centerY)



				for (let i in that.rlist) {
					that.Round(that.rlist[i]);
					if (that.rlist[i].action.type == 'in') {
						if (that.rlist[i].action.status == 0) {
							that.rlist[i].t = 0;
							that.rlist[i].sr = that.rlist[i].rr;
							that.rlist[i].a = ~(that.rlist[i].rr - 0);
							that.rlist[i].e = 80;
							that.rlist[i].action.status = 1;
						}
						that.rlist[i].rr = Tween.Quad.easeIn(that.rlist[i].t, that.rlist[i].sr, that.rlist[i].a, that
							.rlist[
								i].e);
						that.rlist[i].t++;
						if (that.rlist[i].rr < 1) {
							that.rlist.splice(i, 1);
						}
					} else if (that.rlist[i].action.type == 'move') {
						if (that.rlist[i].action.status == 0) {
							that.rlist[i].t = 0;
							that.rlist[i].sx = that.rlist[i].x;
							that.rlist[i].ax = that.rlist[i].action.x - that.rlist[i].sx;
							that.rlist[i].sy = that.rlist[i].y;
							that.rlist[i].ay = that.rlist[i].action.y - that.rlist[i].sy;
							that.rlist[i].e = 120;
							that.rlist[i].action.status = 1;
						}
						that.rlist[i].x = Tween.Quad.easeIn(that.rlist[i].t, that.rlist[i].sx, that.rlist[i].ax, that
							.rlist[i].e);
						that.rlist[i].y = Tween.Quad.easeIn(that.rlist[i].t, that.rlist[i].sy, that.rlist[i].ay, that
							.rlist[i].e);

						that.rlist[i].t++;
						if (that.rlist[i].t > that.rlist[i].e) {
							that.rlist[i].action.type = '';
							that.rlist.splice(i, 1);
						}
					} else {

						that.rlist[i].rr = Tween.Quad.easeInOut(that.rlist[i].t, that.rlist[i].sr, that.rlist[i].a, that
							.rlist[i].e);
						that.rlist[i].t++;
						if (that.rlist[i].t > that.rlist[i].e) {
							that.rlist[i].a = -1 * that.rlist[i].a;
							that.rlist[i].t = 0;
							that.rlist[i].sr = that.rlist[i].rr;
						}
					}
				}







				that.context.draw()
				//setTimeout(() => {
				//	that.createAnimate();
				//}, 100);
			},
			Round(params) { //画一个气泡组件
				this.context.beginPath();
				this.context.arc(params.x, params.y, params.rr, 0, 2 * Math.PI);
				this.context.setFillStyle(params.c);
				this.context.setShadow(0, 0, 10, '#ffffff');
				this.context.fill();
				this.context.setShadow(0, 0, 0, '#ffffff');
				this.context.setFontSize(12 * (params.rr / params.r));
				this.context.setTextAlign('center');
				this.context.setTextBaseline('bottom');
				this.context.fillText(params.info.describe, params.x, params.y - params.rr);
				this.context.setTextAlign('center');
				this.context.setTextBaseline('middle');
				this.context.setFillStyle('#4caf50');
				this.context.setFontSize(14 * (params.rr / params.r));
				this.context.fillText('+' + params.info.score, params.x, params.y);

			},
			GetPosLen(x1, y1, x2, y2) { //计算二点距离
				return parseInt(Math.sqrt(Math.pow(Math.abs(x1 - x2), 2) + Math.pow(Math.abs(y1 - y2), 2)));
			},
			GetRandom(min, max) { //获取随机整数
				return parseInt(Math.random() * (max - min + 1) + min, 10);
			},
			GetBubbleGrid() { //随机获取气泡坐标
				let grid = {};
				let jl = 0;
				do {
					grid.x = this.GetRandom(20, this.screenW - 20);
					grid.y = this.GetRandom(60, 180);
					jl = this.GetPosLen(grid.x, grid.y, this.screenW / 2, 100);
				}
				while (jl < 70);
				return grid;
			},
			//第一种，使用while循环
			sleep(delay) {
				var start = (new Date()).getTime();
				while ((new Date()).getTime() - start < delay) {
					continue;
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #eceef4;
	}

	.signinitem {
		background-color: #e1e1e1;
		flex: 1;
		margin: 0rpx 4rpx;
		border-radius: 8rpx;
		padding: 8rpx 0rpx;
	}

	.signinitem .day {
		text-align: center;
		color: #757575;
	}

	.signinitem .score {
		width: 50rpx;
		height: 50rpx;
		margin: 8rpx auto;
		background-color: #bdbdbd;
		text-align: center;
		color: #212121;
		border-radius: 50%;
		font-size: 24rpx;
		line-height: 50rpx;
	}

	.signinitem_action {
		background-color: #4CAF50;
		flex: 1;
		margin: 0rpx 4rpx;
		border-radius: 8rpx;
		padding: 8rpx 0rpx;
	}

	.signinitem_action .day {
		text-align: center;
		color: #FFFFFF;
	}

	.signinitem_action .score {
		width: 50rpx;
		height: 50rpx;
		margin: 8rpx auto;
		background-color: #388E3C;
		text-align: center;
		color: #FFFFFF;
		border-radius: 50%;
		font-size: 24rpx;
		line-height: 50rpx;
	}
</style>
